/*
 * @Author: 贺永胜[heyongsheng]
 * @Date: 2018-11-03 22:24:55
 * @Last Modified by: 贺永胜[heyongsheng]
 * @Last Modified time: 2019-01-14 15:44:02
 */
<template>
  <div class="header-wrap">
    <header class="header nofilter" :class="{filterBlur: this.$store.state.filterBlur}">
      <div class="container">
        <router-link class="logo" to="/">
          <img src="./img/logo.png" alt="logo">
        </router-link>
        <nav class="main-nav">
          <ul class="nav-list">
            <li class="main-nav-list">
              <!-- <button class="phone-show-menu iconfont" @click="changePhoneHide" @blur="closePhoneHide">
                首页
              </button>
              <ul class="phone-hide" :class="{show: phoneHide}">
                <li class="nav-item">
                  <router-link to="/">
                    首页
                  </router-link>
                </li>
                <li class="nav-item" @click="hello">
                  聊天室
                </li>
                <li class="nav-item">
                  工作
                </li>
                <li class="nav-item">
                  活动
                </li> -->
                <!-- <li class="nav-item">
                  <span class="language-title iconfont">多语言</span>
                  <ul class="language-dropdown">
                    <li class="language-dropdown-item">繁体中文</li>
                    <li class="language-dropdown-item">日本語</li>
                    <li class="language-dropdown-item">English</li>
                    <li class="language-dropdown-item">Русский</li>
                    <li class="language-dropdown-item">한국어</li>
                    <li class="language-dropdown-item">Português</li>
                  </ul>
                </li> -->
              <!-- </ul> -->
            </li>
            <li class="nav-item search">
              <form action="" class="search-form" :class="{active: searchForm}">
                <input
                  type="text"
                  class="search-input"
                  placeholder="搜索"
                  @focus="SearchActive"
                  @blur="SearchBlur"
                >
                <span class="iconfont search-btn">&#xe65b;</span>
              </form>
            </li>
            <li class="nav-item add">
              <router-link to="/article/add/">
                <button class="addArticle">写文章</button>
              </router-link>
            </li>
            <li class="nav-item news" v-if="this.$store.state.loginState">
              <span class="iconfont">&#xe633;</span>
            </li>
            <li class="nav-item menu" v-if="this.$store.state.loginState" @click="this.menuToggle">
              <button class="user-photo iconfont"><img :src="this.$store.state.userphoto"></button>
              <ul class="nav-menu user-dropdown-list" v-if="this.usermenu">
                <div class="nav-menu-item-group">
                  <li class="nav-menu-item">
                    <router-link to="/article/add/">
                      <i class="iconfont">&#xe601;</i>
                      <span>写文章</span>
                    </router-link>
                  </li>
                  <li class="nav-menu-item">
                    <a>
                      <i class="iconfont">&#xe8fb;</i>
                      <span>草稿</span>
                    </a>
                  </li>
                </div>
                <div class="nav-menu-item-group">
                  <li class="nav-menu-item">
                    <a>
                      <i class="iconfont">&#xe608;</i>
                      <span>我的主页</span>
                    </a>
                  </li>
                  <li class="nav-menu-item">
                    <a>
                      <i class="iconfont">&#xe606;</i>
                      <span>我赞过的</span>
                    </a>
                  </li>
                  <li class="nav-menu-item">
                    <a>
                      <i class="iconfont">&#xe625;</i>
                      <span>我的收藏</span>
                    </a>
                  </li>
                  <li class="nav-menu-item">
                    <a>
                      <i class="iconfont">&#xe748;</i>
                      <span>标签管理</span>
                    </a>
                  </li>
                </div>
                <div class="nav-menu-item-group">
                  <li class="nav-menu-item">
                    <a>
                      <i class="iconfont">&#xe620;</i>
                      <span>设置</span>
                    </a>
                  </li>
                  <li class="nav-menu-item about">
                    <a>
                      <i class="iconfont">&#xe600;</i>
                      <span>关于</span>
                      <i class="iconfont">&#xe673;</i>
                    </a>
                    <ul class="nav-menu more-about">
                      <li class="nav-menu-item">
                        <a>
                          <span>下载客户端</span>
                        </a>
                      </li>
                      <li class="nav-menu-item">
                        <a href="https://jq.qq.com/?_wv=1027&amp;k=5brvYwT">
                          <span>加入我们</span>
                        </a>
                      </li>
                      <li class="nav-menu-item">
                        <a>
                          <span>关于</span>
                        </a>
                      </li>
                      <li class="nav-menu-item">
                        <a>
                          <span>合作伙伴</span>
                        </a>
                      </li>
                    </ul>
                  </li>
                </div>
                <div class="nav-menu-item-group">
                  <li class="nav-menu-item" @click="logout">
                    <a>
                      <i class="iconfont">&#xe6ae;</i>
                      <span>退出</span>
                    </a>
                  </li>
                </div>
              </ul>
            </li>
            <li class="nav-item auth" v-else>
              <span class="login iconfont" @click="showLogBox(true)">登录</span>
              <span class="register" @click="showLogBox(false)">注册</span>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <login ref="logBox"></login>
    <div class="header-div"></div>
  </div>
</template>

<script>
import Login from '@/components/login/Login'
export default {
  name: '',
  data () {
    return {
      phoneHide: false,
      searchForm: false,
      usermenu: false
    }
  },
  components: {
    Login
  },
  methods: {
    changePhoneHide () {
      this.phoneHide = !this.phoneHide
    },
    closePhoneHide () {
      this.phoneHide = false
    },
    SearchActive () {
      this.searchForm = true
    },
    SearchBlur () {
      this.searchForm = false
    },
    showLogBox (data) {
      this.$refs.logBox.show(data)
    },
    menuToggle () {
      this.usermenu = !this.usermenu
    },
    hello () {
      this.common.showRegError('hello', this, true)
    },
    logout () {
      console.log('jaj')
      this.$ajax.get('/web/php/logout.php')
        .then((result) => {
          window.location.reload()
        })
      // this.$store.dispatch('changeState', {
      //   name: 'changeLoginState',
      //   value: false
      // })
    }
  }
}

</script>
<style lang='stylus' scoped>
@import './header'
</style>
